<template>
  <div>
    <div><center><h1>网站角色管理</h1></center></div>
    <div>
        <el-table :data="role_list" border style="width: 50%">
            <el-table-column fixed prop="id" label="ID" width="150">
          </el-table-column>
          <el-table-column fixed prop="role" label="角色名" width="150">
          </el-table-column>
          <el-table-column prop="per_id" label="权限" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="change(scope.row.id)" type="text" size="small"
                >修改</el-button>
              <el-button @click="del(scope.row.id)" type="text" size="small"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="add">新增角色</el-button>
    </div>
    <div>
          <el-drawer
              title="添加角色信息"
              :visible.sync="drawer"
              direction="rtl">
              <span>角色名:<input v-model="obj.role"/></span><br>
              <span>权限:
                  <el-select v-model="obj.per_id" placeholder="请选择部门">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.permission"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span>
              <span><el-button @click="realAdd">确认添加</el-button></span>
          </el-drawer>
    </div>
    <div>
          <el-drawer
              title="修改角色信息"
              :visible.sync="drawer1"
              direction="rtl">
              <span>角色名:<input v-model="obj1.role"/></span><br>
              <span>权限:
                  <el-select v-model="obj1.per_id" placeholder="请选择部门">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.permission"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span>
              <span><el-button @click="realChange(obj1.id)">确认修改</el-button></span>
          </el-drawer>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            drawer:false,
            drawer1:false,
            role_list:[],
            obj:{
                id:'',
                role:'',
                per_id:''
            },
            obj1:{
                id:'',
                role:'',
                per_id:''
            },
            lst1:[],
            lst2:[]
        }
    },
    mounted(){
        this.Role();
        this.Per()
    },
    methods:{
        Role(){
          this.$axios.get("users/api/v1/roles/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            this.role_list = resp.data.role;
            }
            });
        },
        Per(){
          this.$axios.get('users/api/v1/permission/')
          .then(res=>{
            console.log(res)
            if (res.data.code == 200){
                this.lst1 = res.data.data
            }
          })  
        },
        change(id){
            this.drawer1=true
            this.$axios.get('users/api/v1/roles/'+id+'/')
            .then(res => {
                console.log(res)
                if (res.data.code == 200){
                    this.obj1 = res.data.role
                }
            })
            .catch(err => {
                console.error(err); 
            })
        },
        realChange(id){
            this.$axios.put('users/api/v1/roles/'+id+'/',this.obj1)
            .then(res=>{
                console.log(res)
                if (res.data.code == 200){
                    alert(res.data.msg)
                    this.drawer1=false
                    this.Role()
                }
            })
        },
        add(){
            this.drawer=true
        },
        realAdd(){
            this.$axios.post('users/api/v1/roles/',this.obj)
            .then(res =>{
                console.log(res)
                if (res.data.code == 200){
                    alert(res.data.msg)
                    this.drawer=false
                    this.Role()
                }else{
                    alert(res.data.msg)
                }
            })
        },
        del(id){
            this.$axios.delete('users/api/v1/roles/'+id+'/')
            .then(res=>{
                console.log(res)
                if (res.data.code == 200){
                    alert(res.data.msg)
                    this.Role()
                }
            })
        }
    }
}
</script>

<style>

</style>